<template>
  <div class="address cover">
    <mall-header />
    <section class="address-title">

    </section>
    <section class="address-board" style="margin-top: 60px">
      <ul class="address-list" v-for="(item,index) in this.$store.state.goodlist">
       <li v-if="item.checked == true">
         <span style="margin: 40px">{{item.productName}}</span>
         <span style="margin: 40px">{{item.productPrice}}</span> X <span style="margin: 40px">{{item.productCount}}</span>
       </li>

      </ul>
      <hr>
      <div>
        <span style="margin: 40px">总价</span>
        <span style="margin-left: 55px">{{this.$store.getters.sum}}</span>
      </div>
    </section>

<!--    <mall-footer />-->
  </div>
</template>

<script lang="ts">
import { Component, Vue} from 'vue-property-decorator'
import { addressBoardItem } from '../types/index'
import MallHeader from '../components/Header/Header.vue'
import MallFooter from '../components/Footer/Footer.vue'
import axios from 'axios'

@Component({
  name: 'Address',
  components: {
    MallHeader,
    MallFooter
  }
})
export default class Address extends Vue {
  private addData:addressBoardItem[] = []
  private checkIndex: number = 0
  private limitNum: number = 3

  getAddressData () {
    axios.get('/mock/address.json').then(res => {
      this.addData = res.data.data
    })
  }

  removeAddress (addressId:string) {
    this.addData.forEach((item, index) => {
      if (addressId === item.addressId) {
        this.addData.splice(index, 1)
      }
    })
  }

  setDefault (addressId:string) {
    this.addData.map((ele, index) => {
      if (ele.addressId === addressId) {
        ele.isDefault = true
      } else {
        ele.isDefault = false
      }
    })
  }

  seeMore () {
    if (this.limitNum === 3) {
      this.limitNum = this.addData.length
    } else {
      this.limitNum = 3
    }
  }
  get addressListFilter () {
    return this.addData.slice(0, this.limitNum)
  }

  created () {
    this.getAddressData()
  }
}
</script>

<style lang="scss">
.address-title {
  width: 1200px;
  margin: 1.6rem auto 0;
}

.address-board {
  width: 1200px;
  margin: 0 auto;
  font-size: 0.9rem;

  .address-list {
    display: flex;
    flex-wrap: wrap;

    .address-item {
      position: relative;
      width: 20rem;
      height: 10rem;
      border: 2px solid #ddd;
      background: #fff;
      margin-right: 3rem;
      padding: 1rem 2rem 0;
      cursor: pointer;
      margin-top: 2rem;

      dt {
        font-size: 1rem;
      }

      .street-name {
        height: 2rem;
        line-height: 2rem;
        margin-bottom: 1rem;
      }

      .tel {
        height: 1.5rem;
        line-height: 1.5rem;
        margin-bottom: 1rem;
      }

      .address-delete {
        position: absolute;
        bottom: 0.7rem;
        right: 2rem;
      }

      .set-default {
        display: none;
      }

      .set-default,
      .default {
        position: absolute;
        bottom: 0.7rem;
        left: 2rem;
        color: #ff6700;

        a {
          color: #ff6700;
          &:hover {
            color: #d45b0a;
          }
        }
      }
    }

    .address-item.checked {
      border-color: #ff6700;
      border-width: 2px;

      .set-default {
        display: block;
      }
    }
  }
}

.address-more {
  width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 14px;

  a {
    color: #ff6700;
  }
}

.icon-arrow-down {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-left: 2px solid #ff6700;
  border-bottom: 2px solid #ff6700;
  transform: rotate(-45deg);
  margin-left: 0.5rem;
  margin-bottom: 0.1rem;
  transition: all 0.3s ease-out;
}

.icon-arrow-down.open {
  transform: rotate(135deg);
  margin-left: 0.7rem;
  margin-bottom: 0;
}
</style>